<script setup lang="ts">
import type { ResetPasswordEmits } from './typings';

import { computed, reactive } from 'vue';
import { useRouter } from 'vue-router';

import { $t } from '@vben/locales';
import {
  VbenButton,
  VbenCheckbox,
  VbenInput,
  VbenInputPassword,
} from '@vben-core/shadcn-ui';

import Title from './auth-title.vue';

interface Props {
  /**
   * @zh_CN 是否处于加载处理状态
   */
  loading?: boolean;
  /**
   * @zh_CN 登陆路径
   */
  loginPath?: string;
/**
   * @zh_CN 验证码路径
   */
  verifyQrCode: string;
  /**
   * @zh_CN 是否显示验证码
   */
  showVerifyCode: boolean;
  /**
   * @zh_CN 用户ID
   */
  user_id: '',
  /**
   * @zh_CN 验证码
   */
  verifyCode: '',
}

defineOptions({
  name: 'ResetPasswordForm',
});

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  loginPath: '/auth/login',
  verifyQrCode: 'https://imeal.weiyoho.com/assets/qrcode/login.png',
  showVerifyCode: true,
  user_id: '',
  verifyCode: '',
});

const emit = defineEmits<{
  submit: ResetPasswordEmits['submit'];
}>();

const router = useRouter();

const formState = reactive({
  agreePolicy: false,
  confirmPassword: '',
  password: '',
  submitted: false,
  user_id: '',
  verifyCode: '',
});

const passwordStatus = computed(() => {
  return formState.submitted && !formState.password ? 'error' : 'default';
});

const confirmPasswordStatus = computed(() => {
  return formState.submitted && formState.password !== formState.confirmPassword
    ? 'error'
    : 'default';
});


function handleSubmit() {
  formState.submitted = true;
  if (passwordStatus.value !== 'default' ) {
    return;
  }

  emit('submit', {
    user_id: props.user_id,
    password: formState.password,
    repeat_password: formState.confirmPassword,        
    verifyCode: props.verifyCode,
  });
}

function goToLogin() {
  router.push(props.loginPath);
}
</script>

<template>
  <div>
    <Title>
      {{ $t('authentication.resetPasswrd') }} 🚀
      <template #desc> {{ $t('authentication.resetPasswordTip') }} </template>
    </Title>
    <!-- Use 8 or more characters with a mix of letters, numbers & symbols. -->
    {{ props.user_id }}
    <VbenInputPassword
      v-model="formState.password"
      :error-tip="$t('authentication.passwordTip')"
      :label="$t('authentication.password')"
      :password-strength="true"
      :placeholder="$t('authentication.password')"
      :status="passwordStatus"
      name="password"
      required
      type="password"
    >
      <template #strengthText>
        {{ $t('authentication.passwordStrength') }}
      </template>
    </VbenInputPassword>

    <VbenInputPassword
      v-model="formState.confirmPassword"
      :error-tip="$t('authentication.confirmPasswordTip')"
      :label="$t('authentication.confirmPassword')"
      :placeholder="$t('authentication.confirmPassword')"
      :status="confirmPasswordStatus"
      name="confirmPassword"
      required
      type="password"
    />
    {{ props.verifyCode }}
    <div>
      <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
        {{ $t('authentication.resetPasswrd') }}
      </VbenButton>
    </div>
    <div class="mt-4 text-center text-sm">
      {{ $t('authentication.alreadyHaveAccount') }}
      <span
        class="text-primary hover:text-primary-hover cursor-pointer text-sm font-normal"
        @click="goToLogin()"
      >
        {{ $t('authentication.goToLogin') }}
      </span>
    </div>
  </div>
</template>
